<template>
    <div :class="computedClass">
        <div class="imgWrapepr">
            <img :src="chat.img"/>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { inject, computed } from 'vue'
const computedClass = computed(()=> ['messageImageWrapper', align])
const chat = inject('chat', {})
const align = inject('align', {})
</script>
<style lang="less" scoped>
.messageImageWrapper {
    display: flex;
    width: 70%;
    &.left {
        justify-content: flex-start;
        img {
            margin-left: 1.5%;
        }
    }
    &.right {
        justify-content: flex-end;
        margin-right: 1.5%;
    }
    .imgWrapepr {
        img {
            width: 200px;
            border-radius: 3px;
            height: auto;
        }
    }
}
</style>